<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>系统管理-脚本仓库-详情</title>

    <link rel="stylesheet" href="../../plugins/fontawesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../../plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
    <link rel="stylesheet" href="../../plugins/select2/css/select2.min.css">
    <link rel="stylesheet" href="../../plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
    <link rel="stylesheet" href="../../plugins/codemirror/codemirror.css">
    <link rel="stylesheet" href="../../plugins/codemirror/theme/darcula.css">
    <link rel="stylesheet" href="../../plugins/codemirror/addon/hint/show-hint.css">
    <link rel="stylesheet" href="../../adminLTE/css/adminlte.min.css">
    <link rel="stylesheet" href="../css/cloud.css">

    <style>
        #param-container > .row:not(:first-child) {
            margin-top: 15px;
        }
    </style>
</head>
<body class="content-wrapper" style="padding: 15px">

<div class="card card-outline card-info">
    <div class="card-header">
        <h3 class="card-title"><i class="fa fa-commenting"></i> 基本信息</h3>
    </div>
    <div id="base-info" class="card-body">
        <div class="form-group row">
            <label for="name" class="col-md-1 col-form-label require">名称</label>
            <div class="col-md-5">
                <input type="text" class="form-control" id="name" placeholder="请输入脚本名称" required>
            </div>
        </div>
        <div class="form-group row">
            <label for="type" class="col-md-1 col-form-label require">类型</label>
            <div class="col-md-5">
                <div class="select2-info">
                    <select class="select2" data-dropdown-css-class="select2-info" data-placeholder="请选择类型"
                            id="type" name="type" style="width: 100%;" required></select>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="card card-outline card-info">
    <div class="card-header">
        <h3 class="card-title"><i class="fa fa-code"></i> 脚本内容</h3>
    </div>
    <div id="text-info" class="card-body">
        <textarea id="text" name="text" style="min-height: 400px"></textarea>
    </div>
</div>
<div class="card card-outline card-info">
    <div class="card-header">
        <h3 class="card-title" style="margin-top: 4px"><i class="fa fa-modx"></i> 脚本参数</h3>
        <div class="card-tools">
            <button id="param-add" type="button" class="btn btn-sm btn-outline-info"><i class="fa fa-plus"></i> 新增</button>
        </div>
    </div>
    <div id="param-container" class="card-body">
        <div class="row">
            <div class="col-md-6">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text bg-info param-index"></span>
                    </div>
                    <input type="text" class="form-control param-input" placeholder="请填写参数说明" required>
                </div>
            </div>
            <div class="col-md-2">
                <button type="button" class="btn btn-outline-danger btn-param-del">
                    <i class="fa fa-times mr-1"></i> 删除
                </button>
            </div>
        </div>
    </div>
</div>
<div class="clearfix">
    <button id="btn-cancel" type="button" class="btn btn-default pull-right ml-1"><i class="fa fa-times"></i> 取消</button>
    <button id="btn-ok" type="button" class="btn btn-info pull-right"><i class="fa fa-check"></i> 确定</button>
</div>


<script src="../../plugins/jquery/jquery.min.js"></script>
<script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../../plugins/select2/js/select2.full.min.js"></script>
<script src="../../plugins/codemirror/codemirror.js"></script>
<script src="../../plugins/codemirror/mode/sql/sql.js"></script>
<script src="../../plugins/codemirror/mode/shell/shell.js"></script>
<script src="../../plugins/codemirror/mode/javascript/javascript.js"></script>
<script src="../js/common.js"></script>
<script src="../js/child.js"></script>
<script>
    var params = Utils.getParams(location.href);
    var action = params["action"];
    var id = params["id"];

    var paramTemplate = $("#param-container").html();
    $("#param-container").html("");

    var typeSelectCtrl = new Select2Ctrl("#type", Url.baseService.scriptType, "value", "name", "select2");
    typeSelectCtrl.init();


    var textCodeMirror = CodeMirror.fromTextArea(document.getElementById("text"), {
        mode: "application/json",
        theme: "darcula"
    });
    textCodeMirror.setSize("auto", "auto");

    if (action === "modify" || action === "detail") {
        $.ajax({
            url: Url.baseService.scriptDetail.replace("{id}", id),
            type: HttpMethod.get,
            success: function (result, status, xhr) {
                $("#name").val(result.name);
                $("#type").val(result.type).trigger("change").trigger("select2:select");
                if (result.args) {
                    for (let i = 0; i < result.args.length; i++) {
                        $("#param-container").append(paramTemplate);
                        $("#param-container .param-index:last").html(result.args[i].name);
                        $("#param-container .param-input:last").val(result.args[i].description);
                    }
                }
                textCodeMirror.setValue(result.text);
            }
        });
    }

    if (action === "detail") {
        $("#name").attr("disabled", "disabled");
        $("#type").attr("disabled", "disabled");
        $("#param-container .param-input").attr("disabled", "disabled");
        textCodeMirror.setOption("readOnly", true);
    }

    $("#type").on("select2:select", function () {
        var type = $("#type").val();
        if ("SQL" === type) {
            textCodeMirror.setOption("mode", "text/x-sql");
        } else if ("BASH" === type) {
            textCodeMirror.setOption("mode", "text/x-sh");
        } else {
            textCodeMirror.setOption("mode", "application/json");
        }
    })

    function setParamIndex() {
        $("#param-container .param-index").each(function (i, n) {
            $(n).html("$" + (i + 1))
        });
    }
    $("#param-add").click(function () {
        $("#param-container").append(paramTemplate);
        setParamIndex();
    });
    $("#param-container").on("click", ".btn-param-del", function () {
        $(this).parents(".row").remove();
        setParamIndex();
    });

    $("#btn-ok").click(function () {
        var valid = true;
        $("#base-info select.select2").each(function (i, n) {
            if ($(n).attr("required") === "required" && Utils.isEmpty($(n).val())) {
                valid = false;
                $(n).attr("data-dropdown-css-class", "select2-danger")
                    .parent().removeClass("select2-info").addClass("select2-danger");
            } else {
                $(n).attr("data-dropdown-css-class", "select2-info")
                    .parent().removeClass("select2-danger").addClass("select2-info");
            }
        });
        $("#base-info input").each(function (i, n) {
            if ($(n).attr("required") === "required" && Utils.isEmpty($(n).val())) {
                valid = false;
                $(n).removeClass("is-valid").addClass("is-invalid");
            } else {
                $(n).removeClass("is-invalid").addClass("is-valid");
            }
        });
        $("#param-container input").each(function (i, n) {
            if ($(n).attr("required") === "required" && Utils.isEmpty($(n).val())) {
                valid = false;
                $(n).removeClass("is-valid").addClass("is-invalid");
            } else {
                $(n).removeClass("is-invalid").addClass("is-valid");
            }
        });
        if (!valid) {
            return;
        }

        var data = {
            name: $("#name").val(),
            type: $("#type").val(),
            text: textCodeMirror.getValue(),
            args: []
        }
        $("#param-container .row").each(function (i, n) {
            data.args.push({
                name: $(n).find(".param-index").html(),
                description: $(n).find(".param-input").val()
            })
        });

        if (Utils.isEmpty(data.text)) {
            parent.window.frameCtrl.toastr.error("请填写脚本内容");
            return;
        }

        if (Utils.isEmpty(id)) {
            $.ajax({
                url: Url.baseService.scriptCreate,
                type: HttpMethod.post,
                data: JSON.stringify(data),
                contentType: ContentType.json,
                success: function (result, status, xhr) {
                    parent.window.frameCtrl.toastr.success("创建成功！");
                    parent.window.frameCtrl.windowCtrl.close();
                }
            });
        } else {
            $.ajax({
                url: Url.baseService.scriptModify.replace("{id}", id),
                type: HttpMethod.put,
                data: JSON.stringify(data),
                contentType: ContentType.json,
                success: function (result, status, xhr) {
                    parent.window.frameCtrl.toastr.success("修改成功！");
                    parent.window.frameCtrl.windowCtrl.close();
                }
            });
        }
    })
</script>

</body>
</html>